<template>
  <view class="u-subsection" :style="[subsectionStyle]">
    <view
      class="u-item u-line-1"
      :style="[itemStyle(index)]"
      @tap="click(index)"
      :class="[noBorderRight(index), 'u-item-' + index]"
      v-for="(item, index) in listInfo"
      :key="index"
    >
      <view :style="[textStyle(index)]" class="u-item-text u-line-1">{{ item.name }}</view>
    </view>
    <view class="u-item-bg" :style="[itemBarStyle]"></view>
  </view>
</template>

<script>
  /**
   * subsection 分段器
   * @description 该分段器一般用于用户从几个选项中选择某一个的场景
   * @tutorial https://www.uviewui.com/components/subsection.html
   * @property {Array} list 选项的数组，形式见上方"基本使用"
   * @property {String Number} current 初始化时默认选中的选项索引值（默认0）
   * @property {String} active-color 激活时的颜色，mode为subsection时固定为白色（默认#303133）
   * @property {String} inactive-color 未激活时字体的颜色，mode为subsection时无效（默认#606266）
   * @property {String} mode 模式选择，见官网"模式选择"说明（默认button）
   * @property {String Number} font-size 字体大小，单位rpx（默认28）
   * @property {String Number} height 组件高度，单位rpx（默认70）
   * @property {Boolean} animation 是否开启动画效果，见上方说明（默认true）
   * @property {Boolean} bold 激活选项的字体是否加粗（默认true）
   * @property {String} bg-color 组件背景颜色，mode为button时有效（默认#eeeeef）
   * @property {String} button-color 按钮背景颜色，mode为button时有效（默认#ffffff）
   * @event {Function} change 分段器选项发生改变时触发
   * @example <u-subsection active-color="#ff9900"></u-subsection>
   */
  export default {
    name: 'u-subsection',
    props: {
      // tab的数据
      list: {
        type: Array,
        default() {
          return []
        },
      },
      // 当前活动的tab的index
      current: {
        type: [Number, String],
        default: 0,
      },
      // 激活的颜色
      activeColor: {
        type: String,
        default: '#303133',
      },
      // 未激活的颜色
      inactiveColor: {
        type: String,
        default: '#606266',
      },
      // 模式选择，mode=button为按钮形式，mode=subsection时为分段模式
      mode: {
        type: String,
        default: 'button',
      },
      // 字体大小，单位rpx
      fontSize: {
        type: [Number, String],
        default: 28,
      },
      // 是否开启动画效果
      animation: {
        type: Boolean,
        default: true,
      },
      // 组件的高度，单位rpx
      height: {
        type: [Number, String],
        default: 70,
      },
      // 激活tab的字体是否加粗
      bold: {
        type: Boolean,
        default: true,
      },
      // mode=button时，组件背景颜色
      bgColor: {
        type: String,
        default: '#eeeeef',
      },
      // mode = button时，滑块背景颜色
      buttonColor: {
        type: String,
        default: '#ffffff',
      },
      // 在切换分段器的时候，是否让设备震一下
      vibrateShort: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        listInfo: [],
        itemBgStyle: {
          width: 0,
          left: 0,
          backgroundColor: '#ffffff',
          height: '100%',
          transition: '',
        },
        currentIndex: this.current,
        buttonPadding: 3, // mode = button 时，组件的内边距
        borderRadius: 5, // 圆角值
        firstTimeVibrateShort: true, // 组件初始化时，会触发current变化，此时不应震动
      }
    },
    watch: {
      current: {
        immediate: true,
        handler(nVal) {
          this.currentIndex = nVal
          this.changeSectionStatus(nVal)
        },
      },
    },
    created() {
      // 将list的数据，传入listInfo数组，因为不能修改props传递的list值
      // 可以接受直接数组形式，或者数组元素为对象的形式，如：['简介', '评论'],或者[{name: '简介'}, {name: '评论'}]
      this.listInfo = this.list.map((val, index) => {
        if (typeof val != 'object') {
          let obj = {
            width: 0,
            name: val,
          }
          return obj
        } else {
          val.width = 0
          return val
        }
      })
    },
    computed: {
      // 设置mode=subsection时，滑块特有的样式
      noBorderRight() {
        return (index) => {
          if (this.mode != 'subsection') return
          let classs = ''
          // 不显示右边的边框
          if (index < this.list.length - 1) classs += ' u-none-border-right'
          // 显示整个组件的左右边圆角
          if (index == 0) classs += ' u-item-first'
          if (index == this.list.length - 1) classs += ' u-item-last'
          return classs
        }
      },
      // 文字的样式
      textStyle() {
        return (index) => {
          let style = {}
          // 设置字体颜色
          if (this.mode == 'subsection') {
            if (index == this.currentIndex) {
              style.color = '#ffffff'
            } else {
              style.color = this.activeColor
            }
          } else {
            if (index == this.currentIndex) {
              style.color = this.activeColor
            } else {
              style.color = this.inactiveColor
            }
          }
          // 字体加粗
          if (index == this.currentIndex && this.bold) style.fontWeight = 'bold'
          // 文字大小
          style.fontSize = this.fontSize + 'rpx'
          return style
        }
      },
      // 每个分段器item的样式
      itemStyle() {
        return (index) => {
          let style = {}
          if (this.mode == 'subsection') {
            // 设置border的样式
            style.borderColor = this.activeColor
            style.borderWidth = '1px'
            style.borderStyle = 'solid'
          }
          return style
        }
      },
      // mode=button时，外层view的样式
      subsectionStyle() {
        let style = {}
        style.height = uni.upx2px(this.height) + 'px'
        if (this.mode == 'button') {
          style.backgroundColor = this.bgColor
          style.padding = `${this.buttonPadding}px`
          style.borderRadius = `${this.borderRadius}px`
        }
        return style
      },
      // 滑块的样式
      itemBarStyle() {
        let style = {}
        style.backgroundColor = this.activeColor
        style.zIndex = 1
        if (this.mode == 'button') {
          style.backgroundColor = this.buttonColor
          style.borderRadius = `${this.borderRadius}px`
          style.bottom = `${this.buttonPadding}px`
          style.height = uni.upx2px(this.height) - this.buttonPadding * 2 + 'px'
          style.zIndex = 0
        }
        return Object.assign(this.itemBgStyle, style)
      },
    },
    mounted() {
      setTimeout(() => {
        this.getTabsInfo()
      }, 10)
    },
    methods: {
      // 改变滑块的样式
      changeSectionStatus(nVal) {
        if (this.mode == 'subsection') {
          // 根据滑块在最左边和最右边时，显示左边和右边的圆角
          if (nVal == this.list.length - 1) {
            this.itemBgStyle.borderRadius = `0 ${this.buttonPadding}px ${this.buttonPadding}px 0`
          }
          if (nVal == 0) {
            this.itemBgStyle.borderRadius = `${this.buttonPadding}px 0 0 ${this.buttonPadding}px`
          }
          if (nVal > 0 && nVal < this.list.length - 1) {
            this.itemBgStyle.borderRadius = '0'
          }
        }
        // 更新滑块的位置
        setTimeout(() => {
          this.itemBgLeft()
        }, 10)
        if (this.vibrateShort && !this.firstTimeVibrateShort) {
          // 使手机产生短促震动，微信小程序有效，APP(HX 2.6.8)和H5无效
          // #ifndef H5
          uni.vibrateShort()
          // #endif
        }
        // 第一次过后，设置firstTimeVibrateShort为false，让其下一次可以震动(如果允许震动的话)
        this.firstTimeVibrateShort = false
      },
      click(index) {
        // 不允许点击当前激活选项
        if (index == this.currentIndex) return
        this.currentIndex = index
        this.changeSectionStatus(index)
        this.$emit('change', Number(index))
      },
      // 获取各个tab的节点信息
      getTabsInfo() {
        let view = uni.createSelectorQuery().in(this)
        for (let i = 0; i < this.list.length; i++) {
          view.select('.u-item-' + i).boundingClientRect()
        }
        view.exec((res) => {
          if (!res.length) {
            setTimeout(() => {
              this.getTabsInfo()
              return
            }, 10)
          }
          // 将分段器每个item的宽度，放入listInfo数组
          res.map((val, index) => {
            this.listInfo[index].width = val.width
          })
          // 初始化滑块的宽度
          if (this.mode == 'subsection') {
            this.itemBgStyle.width = this.listInfo[0].width + 'px'
          } else if (this.mode == 'button') {
            this.itemBgStyle.width = this.listInfo[0].width + 'px'
          }
          // 初始化滑块的位置
          this.itemBgLeft()
        })
      },
      itemBgLeft() {
        // 根据是否开启动画效果，
        if (this.animation) {
          this.itemBgStyle.transition = 'all 0.35s'
        } else {
          this.itemBgStyle.transition = 'all 0s'
        }
        let left = 0
        // 计算当前活跃item到组件左边的距离
        this.listInfo.map((val, index) => {
          if (index < this.currentIndex) left += val.width
        })
        // 根据mode不同模式，计算滑块需要移动的距离
        if (this.mode == 'subsection') {
          this.itemBgStyle.left = left + 'px'
        } else if (this.mode == 'button') {
          this.itemBgStyle.left = left + this.buttonPadding + 'px'
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  @mixin vue-flex($direction: row) {
    /* #ifndef APP-NVUE */
    display: flex;
    flex-direction: $direction;
    /* #endif */
  }

  .u-subsection {
    @include vue-flex;
    align-items: center;
    overflow: hidden;
    position: relative;
  }

  .u-item {
    flex: 1;
    text-align: center;
    font-size: 26rpx;
    height: 100%;
    @include vue-flex;
    align-items: center;
    justify-content: center;
    color: #303133;
    padding: 0 6rpx;
  }

  .u-item-bg {
    background-color: #2979ff;
    position: absolute;
    z-index: -1;
  }

  .u-none-border-right {
    border-right: none !important;
  }

  .u-item-first {
    border-top-left-radius: 8rpx;
    border-bottom-left-radius: 8rpx;
  }

  .u-item-last {
    border-top-right-radius: 8rpx;
    border-bottom-right-radius: 8rpx;
  }

  .u-item-text {
    transition: all 0.35s;
    color: #303133;
    @include vue-flex;
    align-items: center;
    position: relative;
    z-index: 3;
  }
</style>
